<!-- /*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div>
    <DialogTemplate
      ref="DialogTemplateRef"
      v-bind="dialogData"
      @closeHanler="closeHanler"
      
    >
      <div slot="outerMain" style="padding: 0px 20px">
        <el-form :model="fromData" ref="formRef" style="height: 100%;">
          <el-form-item label="探视家属">
            <el-input
              :disabled="true"
              placeholder="请输入"
              v-model="fromData.username"
            ></el-input>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="探视老人">
                <el-input
                  :disabled="true"
                  placeholder="请输入"
                  v-model="fromData.oldname"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <br />
                <el-radio v-model="fromData.sex" label="男">男</el-radio>
                <el-radio v-model="fromData.sex" label="女">女</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="探视日期">
                <el-date-picker
                :disabled="true"
                  v-model="fromData.date"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="身份证号">
                <el-input
                  :disabled="true"
                  placeholder="请输入"
                  v-model="fromData.usernameIDcard"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="手机号">
                <el-input
                  :disabled="true"
                  placeholder="请输入"
                  v-model="fromData.phone"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="关系">
                <el-input
                :disabled="true"
                  placeholder="请输入"
                  v-model="fromData.relationship"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注">
                <br />
                  <el-input
                    type="textarea"
                    :rows="3"
                    resize="none"
                    placeholder="请输入详细地址"
                    v-model="fromData.beizhuVal"
                    :disabled="true"
                  ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="审核状态：">
                <el-switch
                :disabled="this.fromDisabled"
                v-model="fromData.shenhe"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  style="margin-right: 15px;"
                >
              </el-switch>
              {{ fromData.shenhe ? '审核通过' : '审核未通过'  }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="outerFooter" v-if="!this.fromDisabled">
        <el-button @click="($event) => buttonClickHandler(0)">取消</el-button>
        <el-button type="primary" @click="($event) => buttonClickHandler(1)"
          >确定</el-button
        >
      </div>
      <div slot="outerFooter" v-else>
        <el-button @click="($event) => buttonClickHandler(0)">关闭</el-button>
      </div>
    </DialogTemplate>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
import { shenheYuyueMessage } from "@/api/pageMessage";
import DialogTemplate from "@/components/DialogTemplate.vue";
import UploadTemplate from "@/components/UploadTemplate.vue";
import { dressingByScreening } from "@/components/config/index";
export default {
  components: {
    DialogTemplate,
    UploadTemplate,
    VDistpicker,
  },
  name: "taskInFoDialog",
  data() {
    return {
      dialogData: {
        title: "默认为测试标题",
        outWidth: "50%",
        destroyOnClose: true,
        top: "140px",
      },

      fromData: {
        yuYueID:'',
        oldname: "",
        username: "",
        relationship: "",
        sex: "",
        usernameIDcard: "",
        date: "",
        phone: "",
      },

      fromDisabled: true,
    };
  },

  methods: {
    //开启弹框
    handleOpen(val, titleType) {
      console.log(val, titleType);
      //1.打开弹框，并为弹框赋值标题
      this.$refs.DialogTemplateRef?.openDialogOne();
      this.dialogData.title = "预约审核 -- " + titleType;
      //2.打开弹框后 判断里面的数据是否可以编辑
      this.fromDisabled = titleType == "编辑" ? false : true;
      //3.为页面赋初始值
        this.fromData = val
    },
    //弹出框关闭的回调
    closeHanler() {
      this.$refs.formRef.resetFields();
    },
    //保存/取消按钮点击事件
    buttonClickHandler(type) {
      if (type) {
        this.$refs.formRef.validate((vaild) => {
          if (!vaild) return;
          this.getWebData(this.fromData);
        });
      } else {
        //取消操作
        this.$refs.DialogTemplateRef?.closeDialogOne();
      }
    },
    getWebData(vaild) {
      vaild.gsdhp = 1
      shenheYuyueMessage(vaild).then((res) => {
        if (res.data.acknowledged) {
          this.$notify.success({ title: "提示", message: "审核成功" });
          this.$emit("taskFoDialo", {});
          this.$refs.DialogTemplateRef?.closeDialogOne();
        } else {
          this.$notify.error({ title: "提示", message: "审核失败" });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.flexStyleTwo {
  display: flex;
  height: 20px;
}
:deep(.distpicker-address-wrapper select) {
  height: 30px;
  padding: 0px 15px;
  max-width: 150px;
  width: 150px;
}
</style>
